<template>
  <view style="background: rgba(110, 88, 170, 0.02); padding: 20rpx">
    <view class="center" style="margin-top: 50rpx">
      <img
        src="http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%201%20(1).png"
        style="width: 624rpx; height: 310rpx"
        alt=""
      />
    </view>

    <view class="" style="padding: 20rpx 40rpx">
      <view class="title">开始使用</view>
      <view class="small_title">跟随以下步骤，开始为你的训练上科技！</view>
    </view>
    <view class="md" v-for="item in content" :key="item.id">
      <view
        class="center"
        style="margin-bottom: 10rpx; text-align: left; justify-content: left"
      >
        <view class="id center">
          {{ item.id }}
        </view>
        <view class="title">
          {{ item.title }}
        </view>
      </view>
      <view class="content" v-for="con in item.msg">
        {{ con }}
      </view>
      <view
        class="center"
        style="margin-top: 20rpx"
        v-for="img_url in item.img"
        :key="img_url"
      >
        <image
          :src="img_url"
          :style="{
            width: '546rpx',
            height: imageHeights[img_url]
              ? imageHeights[img_url] + 'rpx'
              : 'auto',
          }"
          @load="onImageLoad($event, img_url)"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageHeights: {}, // 存储每张图片的动态高度
      content: [
        {
          id: "1",
          title: "一键登录",
          msg: [
            "点击微信一键登录，即可进入智训实验室。首次登陆的用户可获得个人专属的永久五位数ID。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2029%20(1).png",
          ],
        },
        {
          id: "2",
          title: "首页",
          msg: [
            "在首页可查看个人1RM记录，也可以直接开始基于速度的力量训练。在设备连接状态栏可以看到目前使用的传感器类型（手机/外部设备），点击连接状态栏右上方的“管理”进入“连接管理页”，也可以在下方看到排行榜前三名信息。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2045.png",
          ],
        },
        {
          id: "2.1",
          title: "连接管理",
          msg: [
            "点击“手机”或“外部设备”即可切换数据源。默认为手机连接，打开手机蓝牙后点击外部设备，小程序开始自动搜索蓝牙信号，点击您的外部设备“ZX-VBT”开头的蓝牙名称即可完成连接，训练时将使用您的外部设备数据为您提供服务。注意：相较于手机，外部设备频率更高，数据更准确。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2046.png",
          ],
        },
        {
          id: "2.2",
          title: "排行榜",
          msg: [
            "首页下方的“排行榜”是当日测试1rm的用户由高到低排序，默认为“深蹲榜”，点击“深蹲榜”即可切换其他榜单显示。首页排行榜显示前三名，点击“查看全部”，即可看到更全面的排行信息。排行榜每天00:00更新。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2048.png",
          ],
        },
        {
          id: "2.3",
          title: "1RM记录",
          msg: [
            "点击“首页”上方的“1RM记录”即可看到自己所有参与1RM测试后的历史记录，分为深蹲、卧推和硬拉三类动作的记录，想查看所有记录可以点击“查看完整曲线”，所有记录将以横屏显示。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2050.png",
          ],
        },
        {
          id: "3",
          title: "VBT训练",
          msg: [
            "“首页”的“开始训练”和“VBT训练”都可以进入基于速度的力量训练页，也可以通过底部导航栏进入。进入后选择“针对性训练”和“自由训练”.",
            "其中，“针对性训练”是我们提供的依据1RM、训练动作和训练目的为您私人定制的训练模式，能够更加高效、科学地进行训练，并实时为您反馈重量是否需要增加或减小，以及每组内需要做的个数。",
            "自由训练是为不需要我们提供任何建议，也不需要判断重量、个数是否合适的用户提供的，只提供指标供您参考。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2052.png",
          ],
        },
        {
          id: "3.1",
          title: "VBT简易版",
          msg: [
            "在该页面下，我们提供了训练建议，但数据面板只有平均速度、峰值速度、功率以及峰值功率四个指标。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2054.png",
          ],
        },
        {
          id: "3.2",
          title: "VBT专业版",
          msg: [
            "在该页面下，我们提供了训练建议，数据面板除平均速度、峰值速度、功率以及峰值功率四个指标以外还有平均发力、功率损失等20余专业指标供您参考。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2056.png",
          ],
        },
        {
          id: "3.3",
          title: "VBT指标释义",
          msg: [
            "在该页面下，我们提供了训练建议，数据面板除平均速度、峰值速度、功率以及峰值功率四个指标以外还有平均发力、功率损失等20余专业指标供您参考。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2058.png",
          ],
        },
        {
          id: "3.4",
          title: "开始VBT训练",
          msg: [
            "在该页面下，我们提供了训练建议，数据面板除平均速度、峰值速度、功率以及峰值功率四个指标以外还有平均发力、功率损失等20余专业指标供您参考。",
          ],
          img: [],
        },
        {
          id: "4",
          title: "1RM测试",
          msg: [
            "在VBT页下方“测1RM”、导航栏“1RM”均可进入1RM测试页,进入后选择测量模式，开始测试。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2063.png",
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2062.png",
          ],
        },
        {
          id: "4.1",
          title: "1RM简单测试",
          msg: [
            "在简单测试下，输入您心理感知的能做到的最大重量后，只需要做5次递增重量的动作即可获得您的1RM值，但该模式不考虑肌肉疲劳和当日状态误差，以当日身体情况为您计算，结果较为精准。",
          ],
          img: [],
        },
        {
          id: "4.2",
          title: "1RM复杂测试",
          msg: [
            "在复杂测试下，输入您心理感知的能做到的最大重量后，当日做5次递增重量的动作可获得您的参考1RM值，该模式会考虑肌肉疲劳和当日状态误差，所以需要隔几日再次进行测试，得到您的精准1RM值，此结果最精准。",
          ],
          img: [],
        },
        {
          id: "4.3",
          title: "1RM不测试（估算结果）",
          msg: [
            "在此模式下，输入最大重量下一组可做的最多次数，按照国际通用的粗略估计公式为您得出1RM值，该模式既不考虑肌肉疲劳和当日状态误差，也不考虑您的个人身体情况，结果最不准确。",
          ],
          img: [],
        },
        {
          id: "5",
          title: "我的",
          msg: [
            "我的页面显示您的账号信息，包括头像、昵称、ID以及会员状态，会员状态下方的列表为您提供各类细致的服务。",
          ],
          img: [
            "http://182.92.108.71:9001/image/help/%E7%9F%A9%E5%BD%A2%2071.png",
          ],
        },
        {
          id: "5.1",
          title: "人工客服",
          msg: [
            "点击“我的-人工客服”即可与智训小禾对话，为您解决各类使用过程中遇到的问题。",
          ],
          img: [],
        },
        {
          id: "5.2",
          title: "问题反馈",
          msg: [
            "点击“我的-问题反馈”即可写下您的使用感受，提交反馈，让我们更好地改进产品，为您提供更优质的服务。",
          ],
          img: [],
        },
        {
          id: "5.3",
          title: "关于",
          msg: [
            "点击“我的-关于”即可查看本产品的研发团队信息以及商务合作的联系方式。",
          ],
          img: [],
        },
        {
          id: "6",
          title: "会员充值/续费",
          msg: [
            "点击会员状态右侧充值入口/续费，选择适合您的套餐，点击“立即充值”，完成支付后即可激活/续费会员身份，开始为您的训练上科技！",
          ],
          img: "",
        },
        {
          id: "7",
          title: "兑换码",
          msg: [
            "在不定期活动期间我们会发放会员兑换码，用于免费激活会员。通过“我的-兑换码”进入页面后输入18位兑换码，点击“立即兑换”即可免费完成会员激活。",
          ],
          img: "",
        },
        {
          id: "8",
          title: "入驻邀请",
          msg: [
            "点击“我的-入驻邀请”可查看当前最新的活动内容，目前以健身房、铁馆等各类健身场馆为单位邀请合作，健身房入驻后可获得本产品内的宣传，为健身房提供优质服务，提供免费的配套用品和免费会员兑换码。",
          ],
          img: "",
        },
        {
          id: "9",
          title: "已入驻商家",
          msg: [
            "用户点击“我的-已入驻商家”即可查看附近已拥有配套设备（杠铃用训练支架等）的健身场馆，更方便地进行科学、高效训练，也可以免费领取本产品的会员兑换码。",
          ],
          img: "",
        },
      ],
    };
  },
  methods: {
    onImageLoad(event, img_url) {
      const { width, height } = event.detail; // 获取图片的原始宽高
      const scale = 546 / width; // 计算缩放比例
      this.$set(this.imageHeights, img_url, height * scale); // 计算出新高度并存储
    },
  },
};
</script>

<style lang="less" scoped>
body {
  background: rgba(110, 88, 170, 0.02);
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  /** 文本1 */
  font-size: 48rpx;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 70rpx;
  color: rgba(0, 0, 0, 1);
}
.small_title {
  /** 文本1 */
  font-size: 20rpx;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 30rpx;
  color: rgba(124, 124, 126, 1);
}
.md {
  padding: 20rpx;
  width: 624rpx;
  opacity: 1;
  border-radius: 22rpx;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(124, 124, 126, 0.2);
  margin: 25rpx auto;
  .id {
    width: 50rpx;
    height: 50rpx;
    opacity: 1;
    background: rgba(110, 88, 170, 1);
    border-radius: 50%;
    margin-right: 10rpx;
    /** 文本1 */
    font-size: 24rpx;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 0px;
    color: rgba(255, 255, 255, 1);
  }
  .title {
    /** 文本1 */
    font-size: 36rpx;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 47rpx;
    color: rgba(0, 0, 0, 1);
    opacity: 1;
    font-family: "优设标题黑";
  }
  .content {
    /** 文本1 */
    font-size: 20rpx;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 30rpx;
    color: rgba(124, 124, 126, 1);
    padding: 5rpx 10rpx;
  }
}
</style>
